<template>
  <div class="main-todo">
    <input type="text" class="add-todo" placeholder="请添加事项" autofocus @keyup.enter="addItem" v-model="inputText">
    <todo-item v-for="(item,index) in filterList" :key="index" :FuList="item" @del="handleDelItem"></todo-item>
    <todo-info @ziClearBtn="handleClearYwc" :total="total" @ziChangeBtn="handleChangeBtn"></todo-info>
  </div>
  
</template>
<script>
  import TodoItem from "./coms/TodoItem.vue";
  import TodoInfo from "./coms/TodoInfo.vue";
  let id = 0;
  export default {
    name: "MianTodo",
    data() {
      return {
        inputText: "",
        list: [],
        total: 0,
        filter: "全部",
      };
    },
    methods: {
      addItem() {
        if (this.inputText == "") return;
        this.list.unshift({
          id: id++,
          text: this.inputText,
          completed: false,
        });
        this.inputText = "";
      },
      handleDelItem(id) {
        this.list.splice(this.list.findIndex(item => item.id == id), 1);
      },
      handleClearYwc() {
        this.list = this.list.filter(item => item.completed == false);
      },
      handleChangeBtn(item) {
        this.filter = item;
      },
    },
    components: {
      TodoItem,
      TodoInfo,
    },
    computed: {
      filterList() {
        switch (this.filter) {
          case "全部":
            return this.list;
            break;
          case "未完成":
            return this.list.filter(item => item.completed == true);
            break;
          case "已完成":
            return this.list.filter(item => item.completed == false);
            break;
        }
      },
    },
    watch: {
      list: {
        deep: true,
        handler() {
          this.total = this.list.filter(item => item.completed == false).length;
        },
      },
    },
  };
</script>
<style lang="stylus" scoped>
  .main-todo
    margin 0 auto
    width 600px
    background-color #fff
    box-shadow 0 0 5px #666

    .add-todo
      width 100%
      padding 16px 16px 16px 36px
      font-size 24px
      font-family inherit
      box-sizing border-box
</style>


